<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${proPath}/js/ztree/zTreeStyle.css" />
<link href="https://cdn.bootcss.com/layer/2.1/skin/layer.css" rel="stylesheet">
<link href="${proPath}/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="${proPath}/js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">

<script src="${proPath}/js/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${proPath}/js/ztree/jquery.ztree.all-3.5.min.js"></script>
<script src="${proPath}/js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/layer/2.1/layer.js"></script>
<title>ztree menu</title>
</head>
<body>
	<div style="text-align: center;">
		<div class="container">
			<p>zteee示例demo</p>
			<div class="row">
				<div class="col-md-3">
					<ul id="treeDemo" class="ztree" style="width: 230px; overflow: auto;"></ul>
				</div>
				<div class="col-md-3">.col-md-1</div>
				<div class="col-md-3"></div>
			</div>

		</div>
	</div>
</body>
<script type="text/javascript">
	function addDiyDom(treeId, treeNode) {
		var clasObj = $("#" + treeNode.tId + "_ico")
		clasObj.removeClass().addClass(treeNode.icon)
	}
	//双击后 图标又会变回去
	function zTreeOnDblClick(event, treeId, treeNode) {
		alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
	};

	function zTreeOnExpand(event, treeId, treeNode) {
		addDiyDom(treeId, treeNode)
		//layer.msg(treeNode.tId + ", " + treeNode.name + "||" + treeNode.icon);
	};

	function initZtree(tree, url) {
		$.ajax({
			contentType : "application/json;charset=UTF-8",
			//请求地址
			url : url,
			//数据，json字符串 data : JSON.stringify(list),
			//请求成功
			success : function(result) {
				console.log(result);
				var setting = {
					data : {
						simpleData : {
							//enable : true,使用标准json格式
						//pIdKey: "pid", //java返回来的本来是pId，结果js接收到变成pid小写了|使用fastjson转换
						},
					},
					view : {
						addDiyDom : addDiyDom,
						onDblClick : zTreeOnDblClick
					},
					callback : {
						onExpand : zTreeOnExpand, //展开
						onCollapse : zTreeOnExpand
					//折叠
					},
				};
				$.fn.zTree.init($("#" + tree), setting, result);
			},
			//请求失败，包含具体的错误信息
			error : function(e) {
				console.log(e.status);
				console.log(e.responseText);
			}
		});
	}

	$(document).ready(function() {
		// layer.alert('内容');
		layer.msg('hello');
		initZtree('treeDemo', "${proPath}/menu/java8stream/");
	});
</script>
</html>
